<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>简单表格的练习</title>
        <style type="text/css">
            
            .tab{
                /* 设置边框 */
                /* border: 1px solid black; */
                width: 300px;
                /* 居中 */
                margin: 0 auto;

                /* table和td边框之间默认有一个距离
                *   通过border-spacing可以设置这个距离 
                */
                /* border-spacing: 0px; */

                /* border-collapse可设置表格的边框合并
                *    可选值：
                *       collapse：table和td的边框合并
                *       separate：默认值，table和td的边框不合并
                *  指定了border-collapse的值为collapse时，border-spacing属性则会失效
                */
                border-collapse: collapse;
                /* 设置表格内容居中 */
                text-align: center;

            }
            /* 给单元格设置边框 */
           td,th{
                /* 设置边框 */
                border: 1px solid black;
           }
           /* 给表格设置隔行变色 */
           tr:nth-of-type(even){
                background-color: green;
           }
           /* 鼠标移入到某行时改变颜色 */
           tr:hover{
                background-color: red;
           }

        </style>
    </head>
<body>
    <!-- 使用table标签创建表格 -->
    <table class="tab" >
        <!-- tr标签表示表格的一行，有几行就有几个tr标签 -->
        <tr>
            <!-- th标签表示表头 -->
            <th>1号</th>
            <th>2号</th>
            <th>3号</th>
        </tr>
        <tr>
            <!-- td标签表示一个单元格，有几个单元格就有几个td标签 -->
            <td>A1</td>
            <td>A2</td>
            <!-- rowspan纵向的合并单元格 -->
            <td rowspan="2">A3</td>
        </tr>
        <tr>
            <td>B1</td>
            <td>B2</td>
        </tr>
        <tr>
            <td>C1</td>
            <!-- colspan横向合并单元格，值为要合并的单元格数量 -->
            <td colspan="2">C2</td>
        </tr>
    </table>
</body>
</html>